<template>
  <div>
    <div class="divBox">
      <el-row :gutter="20" class="baseInfo">
        <el-col v-bind="grid" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <div class="acea-row row-between-wrapper">
              <div class="acea-row align-center">
                <div class="main_badge">
                  <span class="iconfont iconxiaoshoue"></span>
                </div>
                <span class="main_tit">订单总数</span>
              </div>
            </div>
            <div class="content">
              <span class="content-number spBlock my15">{{orderCount}}</span>
            </div>
          </el-card>
        </el-col>
        <el-col v-bind="grid" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <div class="acea-row row-between-wrapper">
              <div class="acea-row align-center">
                <div class="main_badge">
                  <span class="iconfont iconxinzengyonghu"></span>
                </div>
                <span class="main_tit">当前在线人数</span>
              </div>
            </div>
            <div class="content">
              <span class="content-number spBlock my15">{{userOnLineCount}}</span>
            </div>
          </el-card>
        </el-col>
        <el-col v-bind="grid" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <div class="acea-row row-between-wrapper">
              <div class="acea-row align-center">
                <div class="main_badge">
                  <span class="iconfont iconxinzengyonghu"></span>
                </div>
                <span class="main_tit">日活跃人数</span>
              </div>
            </div>
            <div class="content">
              <span class="content-number spBlock my15">{{dayUserCount}}</span>
            </div>
          </el-card>
        </el-col>
        <el-col v-bind="grid" class="ivu-mb">
          <el-card :bordered="false" dis-hover :padding="12">
            <div class="acea-row row-between-wrapper">
              <div class="acea-row align-center">
                <div class="main_badge">
                  <span class="iconfont iconxinzengyonghu"></span>
                </div>
                <span class="main_tit">总人数</span>
              </div>
            </div>
            <div class="content">
              <span class="content-number spBlock my15">{{userCount}}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 订单统计 -->
    <div class="divBox">
      <el-row :gutter="24">
        <el-col san="24">
          <el-card :bordered="false" class="dashboard-console-visit">
            <div slot="header">
              <div class="acea-row row-between-wrapper">
                <div class="acea-row row-middle">
                  <div class="header_title">新增订单统计</div>
                </div>
              </div>
            </div>
            <echarts-from ref="visitChart" :yAxisData="yAxisData" :seriesData="series" :xAxis="xAxis"
              :legendData="legendData"></echarts-from>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 用户统计 -->
    <div class="divBox">
      <el-row :gutter="24">
        <el-col class="ivu-mb mb10 dashboard-console-visit">
          <el-card :bordered="false" dis-hover>
            <div slot="header">
              <div class="acea-row row-middle">
                <div class="header_title">新增用户统计</div>
              </div>
            </div>
            <echarts-from ref="userChart" :echartsTitle="line" :xAxis="userXAxis"
              :seriesData="userSeries"></echarts-from>
          </el-card>
        </el-col>
      </el-row>
    </div>

  </div>
</template>

<script>
  import {
    reportGetReportUserTrade
  } from '@/api/dataField'
  import echartsFrom from '@/components/echarts/index';
  export default {
    components: {
      echartsFrom
    },
    data() {
      return {
        grid: {
          xl: 6,
          lg: 6,
          md: 12,
          sm: 12,
          xs: 24
        },
        yAxisData: [],
        series: [],
        xAxis: [],
        legendData: [],
        line: 'line',
        userXAxis: [],
        userSeries: [],
        // 订单
        orderCount: '', // 订单总数
        addOrderPriceGraph: {}, // 订单图
        // 交易员
        userOnLineCount: '', //当前在线人数
        dayUserCount: '', //日活跃人数
        userCount: '', // 总人数
        addUserGraph: {},
      }
    },
    mounted() {
      this.yAxisData = [{
          type: 'value',
          name: '金额',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#7F8B9C'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F5F7F9'
            }
          }
        },
        {
          type: 'value',
          name: '数量',
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            textStyle: {
              color: '#7F8B9C'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: '#F5F7F9'
            }
          }
        }
      ]
      this.legendData = ['订单金额', '订单数']
      this.GetReportUserTrade()
    },
    methods: {
      GetReportUserTrade() {
        reportGetReportUserTrade().then(res => {
          console.log('用户统计及交易统计', res)
          this.orderCount = res.orderCount
          this.addOrderPriceGraph = res.addOrderPriceGraph
          this.userOnLineCount = res.userOnLineCount
          this.dayUserCount = res.dayUserCount
          this.userCount = res.userCount
          this.addUserGraph = res.addUserGraph

          // 订单统计
          // 订单数据
          // this.series = [{
          //   name:"订单金额",
          //   type:"bar",
          //   itemStyle:{
          //     normal:{
          //         color:'#5B8FF9',
          //     }
          //   },
          //   data: pices
          // },
          //   {
          //     name:"订单数",
          //     type:"line",
          //     smooth: true,
          //     itemStyle:{
          //       normal:{
          //         color:'#4BCAD5',
          //     }
          //     },
          //     yAxisIndex: 1,
          //     data: qualitys
          //   }]
          // 订单时间
          //this.xAxis = []

          // 用户统计
          this.userXAxis = this.addUserGraph.timeline
          this.userSeries = [{
            data: this.addUserGraph.dataDay,
            name: '人数（人）',
            type: 'line',
            tooltip: true,
            smooth: true,
            symbol: 'none',
            areaStyle: {
              normal: {
                opacity: 0.2
              }
            }
          }];

        }).catch(err => {
          console.log(err)
        })
      },
      // 监听页面宽度变化，刷新表格
      handleResize() {
        if (this.addOrderPriceGraph) this.$refs.visitChart.handleResize();
        if (this.addUserGraph) this.$refs.userChart.handleResize();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .ivu-mb {
    margin-bottom: 20px;
  }

  .main_tit {
    color: #333;
    font-size: 14px;
    font-weight: 500;
  }

  .main_badge {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    margin-right: 10px;
    background: #2C90FF;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .my15 {
    margin: 15px 0 15px;
  }

  .align-center {
    align-items: center;
  }

  .baseInfo {
    ::v-deep .el-card__header {
      padding: 15px 20px !important;
    }
  }

  .content {
    &-number {
      font-size: 30px;
      font-weight: 600;
      font-family: PingFangSC-Semibold, PingFang SC;
      color: #333;
    }
  }

  // 订单统计
  .header_title {
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #000000;
    padding-left: 8px;
    position: relative;

    &::before {
      position: absolute;
      content: '';
      width: 2px;
      height: 18px;
      background: #1890FF;
      top: 0;
      left: 0;
    }
  }

  // 用户统计
</style>
